<template>
    <ElCard class="mb-20px" >
        <template #header>
            <div class="card-header">
                <span>快捷入口</span>
            </div>
        </template>
    <ElRow :gutter="20" >
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div>
                            <Icon icon="ep:set-up" :size="55"/>
                        </div>
                        <div class="box">
                            账户设置
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="mdi:comments-text" :size="55"/>
                        </div>
                        <div class="box">
                            微圈评论
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="icon-park-twotone:comments" :size="55"/>
                        </div>
                        <div class="box">
                            课程评论
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="material-symbols:format-list-bulleted" :size="55"/>
                        </div>
                        <div class="box">
                            课程列表
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="material-symbols:view-list" :size="55"/>
                        </div>
                        <div class="box">
                            微圈列表
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="fluent-mdl2:compliance-audit" :size="55"/>
                        </div>
                        <div class="box">
                            课程审核
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="ant-design:audit-outlined" :size="55"/>
                        </div>
                        <div class="box">
                            微圈审核
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
            <template #default>
                <div :class="`${prefixCls}__item flex justify-center`" @click="A1">
                    <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-center ${prefixCls}__item--icon ${prefixCls}__item--peoples p-20px inline-block rounded-6px`">
                        <div >
                            <Icon icon="carbon:cloud-auditing" :size="55"/>
                        </div>
                        <div class="box">
                            审核日志
                        </div>
                    </div>
                </div>
            </template>
        </ElCol>
    </ElRow>
    </ElCard>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
    import { useDesign } from '@/hooks/web/useDesign'
    import {useRouter} from "vue-router"

    const { push } = useRouter();
    const { getPrefixCls } = useDesign()

    const A1 = () => {
        push("/dashboard/analysis");
    }
    const prefixCls = getPrefixCls('panel')
    const loading = ref(false)
</script>


<style lang="less" scoped>
    .box{
        margin-top: 30px;
    }
@prefix-cls: ~'@{namespace}-panel';

.@{prefix-cls} {
    &__item {
        &--peoples {
            color: #c63fc9;
        }

        &:hover {
            :deep(.@{namespace}-icon) {
                color: #ffffff !important;
            }
            :deep(.box) {
                color: #ffffff !important;
            }
            .@{prefix-cls}__item--icon {
                transition: all 0.38s ease-out;
            }
            .@{prefix-cls}__item--peoples {
                background: #55c9bc;
            }
        }
    }
}
</style>
